<h1>从这里你可以旅行到新的世界.</h1>


<clr-alert [clrAlertType]="'alert-success'"
           [clrAlertClosable]="false"
           *ngIf="ms.game.canTravel; else warn">
  <div class="alert-item">
    <span class="alert-text">
      你将会得到
      <span class="monospace">{{ms.game.currentWorld.prestige}} </span>
      经验

            <span *ngIf="ms.game.hasSecondMastery()">
        和 1 专精点
      </span>
    </span>
  </div>
</clr-alert>

<ng-template #warn>
  <clr-alert [clrAlertType]="'alert-danger'"
             [clrAlertClosable]="false">
    <div class="alert-item">
      <span class="alert-text">
        如果您选择跳过，你将得不到经验奖励!
      </span>
    </div>
  </clr-alert>
</ng-template>


<clr-alert [clrAlertType]="'alert-warning'"
           [clrAlertClosable]="false"
           *ngIf="!ms.game.researches.mastery.done">
  <div class="alert-item ">
    <span class="alert-text">
      专精研究未完成。
    </span>
  </div>
</clr-alert>

<button class="btn"
        (click)="randomize()">随机</button>

<span>
  最低等级:
  <span class="monospace">
    {{minLevel | format:true}}
  </span>
</span>
<span>
  最高等级:
  <span class="monospace">
    {{maxLevel | format:true}}
  </span>
</span>

<p-slider [(ngModel)]="rangeValues"
          [range]="true"
          [min]="1"
          [max]="maxSafeInt"
          (onChange)="setLevels()"></p-slider>

<!-- <div class="card-columns">
    <app-world [world]="world"
               *ngFor="let world of ms.game.nextWorlds; trackBy:getWorldId"></app-world>
  </div> -->

<div class="clr-row clr-justify-content-center">
  <div *ngFor="let world of ms.game.nextWorlds; trackBy:getWorldId"
       class="worldMaxWidt clr-col-sm-12 clr-col-md-4">
    <app-world [world]="world"></app-world>
  </div>
</div>


<clr-modal [(clrModalOpen)]="travelMessage">
  <h3 class="modal-title">更换世界 ?</h3>
  <div class="modal-body">
    <p>你将失去一切，除了声望升级，继续 ?</p>
  </div>
  <div class="modal-footer">
    <button type="button"
            class="btn btn-outline"
            (click)="travelMessage = false">取消</button>
    <button type="button"
            class="btn btn-primary"
            (click)="travel()">确定</button>
  </div>
</clr-modal>
